<template>
<div class="box">
  <div class="title">
    <span>{{title}}
      <span v-if="tips">
        <q-icon name="iconfont icontubiao-72" class="font-18 text-grey" />
        <q-tooltip max-width="300px">{{tips}}</q-tooltip>
      </span>
    </span>
    <q-btn @click="showBig" v-if="isShowBig" class="float-right" flat round size="xs" color="primary" icon="iconfont icontubiao-131">
      <q-tooltip>最大化</q-tooltip>
    </q-btn>
  </div>
  <slot name="content"></slot>
</div>
</template>

<script>
export default {
  props: {
    tips: {
      type: String,
      default: ''
    },
    title: {
      type: String
    },
    isShowBig: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    showBig () {
      this.$emit('big')
    }
  }
}
</script>

<style lang='stylus' scoped>
.box{
  padding 20px
  background-color #fff
  border-radius 6px
  line-height 1
  .title{
    margin-bottom 20px;
    font-size 16px
    .float-right{
      position relative
      top -5px
      right -5px
    }
  }
}
</style>
